<template>
	<view class="content">

		<Loading class="loading-box" style="position: fixed;" v-show="!isLoading" :isStatus='loadStatus'></Loading>



		<cu-custom bgColor="bg-white" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>


		<!--  订单搜索的开始 -->
		<view class="search-boxes" @click="jumpTo('','search')"
			:style="[{height:StatusBar.height+5+'px',marginTop:StatusBar.top+StatusBar.height+20+'px'}]">
			<view class="input-search-box1 ">
				<input class="inputSearch1" type="text" disabled="disabled" placeholder="输入您想查找的岗位关键词" />
				<text class="cuIcon-search iconsousuo" style="right: 0;"></text>
			</view>
		</view>
		<!--  订单搜索的结束 -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" bottom="10%" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" >

		

			<!-- <view class="screen-box" :style="[{height:StatusBar.height+10+'px'}]" id="screen">
				<view class="screen-tab flex flex-direction" v-for="(tab,index) in tabList" @click="changeTab(index)">

					<text :class="tabIndex==index?'order-tap-select':'order-tab-no'"> {{tab.name}}</text>
					<view class="orderline animation-slide-left " v-show="tabIndex==index">

					</view>
				</view>

			</view> -->
			<!-- 列表框 -->


			<view class="list-scroll" v-if="postData.length>0">
				<PostList @clickItem="jumpTo" :postData='postData'></PostList>
			</view>




		</mescroll-body>






	</view>
</template>
<script>
	import PostList from "../../components/postList.vue"
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue"
	export default {
		components: {
			PostList,
			MescrollBody
		},
		data() {
			return {
				title: "职位列表",
				isLoading: false, //是否加载完成显示
				loadStatus: 'load',
				resDomain: this.resDomain,
				StatusBar: this.Custom,
				bannerNum: 0,
				banner: [],
				autoplay: true,
				interval: 3000,
				duration: 500,
				isBottom: false,
				swiperHeight: 0,
				currentPage: 0,
				tabBarType: "home",
				timeUpdate: "",
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: '找实习',
					type: 0
				}, {
					cuIcon: 'recordfill',
					color: 'orange',
					badge: 1,
					name: '找全职',
					type: 1
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '找兼职',
					type: 2
				}],

				tabList: [{
						name: "最新发布",
						type: ""

					},
					{
						name: "全职岗位",
						type: 0
					},
					{
						name: "兼职岗位",
						type: 1
					}
				],
				tabIndex: 0,
				isRefresh: false,
				postData: [],
				mescroll: null,
				downOption: {
					use: false, // 是否启用下拉刷新; 默认true
					native: false,
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					load: false,
					onScroll: true,
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据',
						tips: ""
					},
					textNoMore: '到底啦'
				},
				param: {
					area_id: uni.getStorageSync('area_id'),
					page: 0,
					limit: 10,
					type: "",
					school: "",
					keywords: "",
					city: ""

				}
			}

		},
		onLoad(option) {
			this.categoryKey(option.key);
			
		},
		onReady() {
			this.getInfo().then((e) => {

				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height * 2) - 60;

				this.isLoading = true;

			})
		},
		
		onShow() {
			console.log("显示")
			this.timeUpdate = new Date().getTime();

		},
		onPageScroll(e) {
			(e.scrollTop > 550 && !this.isShow) ? (() => {
				this.is_fixed = 1;
				this.isShow = true;
			})() : (e.scrollTop <= 550 && this.isShow) ? (() => {
				this.isShow = false;
				this.is_fixed = 0;
			})() : "";
		},
		onPullDownRefresh() {
			this.downCallback();
		},
		onReachBottom() {
			this.upCallback(this.mescroll);
		},
		onShareAppMessage(res) {
			return {
				title: "一舟校园",
				path: '/pages/basic/basic'
			}
		},
		methods: {

			/**
			 * 分类筛选
			 * @param {Object} index
			 */
			categoryKey(e) {
				this.param.keywords = e;
				this.mescroll.resetUpScroll();
			},
			getBanner() {
				this.apiRequest('/buyer/getAd', {
					area_id: uni.getStorageSync('area_id'),
					platform: 2,
					position_type: 0
				}, 0).then(res => {
					if (res.code == 200) {
						this.bannerNum = 0;
						for (let i in res.data) {
							if (res.data[i].position_type == 0) {
								this.bannerNum++;
							}
						}
						this.banner = res.data;
					}
				})
			},
			/**
			 * 下拉刷新
			 */
			changeTab(index) {
				this.tabIndex = index;
				this.param.type = this.tabList[index].type;
				this.mescroll.resetUpScroll();
			},
			mescrollInit(mescroll) {
				// this.getBanner();
				this.mescroll = mescroll;
			},
			downCallback() {
				console.log("下拉刷新");
				// this.getBanner();
				this.upCallback(this.mescroll);

			},
			upCallback(page) {

				this.param.page = page.num;
				this.param.limit = page.size;
				this.apiRequest('/buyer/OfferList', this.param, "get", 0).then(res => {
					uni.stopPullDownRefresh();
					if (res.code != 200) {
						this.mescroll.endSuccess()
					}
					if (page.num == 1) {
						this.postData = []
					}

					this.postData = this.postData.concat(res.data.data); //追加新数据
					this.mescroll.endBySize(this.postData.length, res.data.total);

				}).catch(() => {
					uni.stopPullDownRefresh()
					this.mescroll.endErr();
				})


			},

			navTo(index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: this.tabBar[index].url
						})
						break;
					case 2:
						uni.navigateTo({
							url: this.tabBar[index].url
						})
						break;
					default:
						this.currentPage = index;
						break;

				}


			},
			jumpTo(...dat) {

				switch (dat[1]) {
					case "0":
						uni.navigateTo({
							url: "/app/Offer/pages/index/postCategory"
						})
						break;
					case "post":
						uni.navigateTo({
							url: "/app/Offer/pages/index/postInfo?offer_id=" + this.postData[dat[0]].offer_id
						})
						break;
					case "search":
						uni.navigateTo({
							url: "/app/Offer/pages/index/search"
						})

						break;
				}


			},
			/**
			 * 打开广告
			 */
			openUrl(item) {
				switch (item.open_type) {
					case 0:
						uni.navigateTo({
							url: item.ad_link
						})
						break;

					case 1:
						let path = item.ad_link + "&user_id=" + this.user_id;
						uni.setStorageSync("weburl", path);
						uni.navigateTo({
							url: "/components/webOpen"
						})
						break;
				}
			},





		}



	}
</script>

<style scoped>
	.navFont {
		font-size: 24upx;
	}

	/**
	 * 搜索框样式
	 */
	.search-boxes {
		width: 92%;
		margin: auto;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		align-items: center;
		box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 20upx 30upx 20upx 30upx;

	}

	.input-search-box1 {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;

	}

	.inputSearch1 {
		width: 80%;
	}

	/**
	 * banner样式
	 */
	.bannerBox {
		width: 92%;
		margin: 30upx auto;
		height: 200upx;
	}

	.lunboBox {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.screen-swiper {
		width: 100%;
		height: 100%;
	}

	.lunboImg {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
		position: relative;
	}

	/**
	 * 筛选框样式
	 */
	.screen-box {
		width: 92%;
		margin: 30upx auto 0 auto;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.05);
	}

	.screen-tab {
		margin: auto;
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	/**
	 * tab
	 */
	.order-tap-select {
		font-size: 28upx;
		font-weight: 800;
		color: #333333;
	}

	.order-tab-no {
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
	}

	.orderline {
		width: 30%;
		height: 6upx;
		background: #1270E0;
		border-radius: 30%;
		position: absolute;
		bottom: 10rpx;
	}

	.tag-style {
		max-width: 240rpx;
		height: 50rpx;
		line-height: 50rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}

	/**
	 * 应用列表样式
	 */
	.appBox {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-top: 40upx;
	}

	.app-item {
		display: flex;
		width: 20%;
		height: 120upx;
		margin-bottom: 20upx;
		flex-direction: column;
	}

	.app-icon {
		width: 100%;
		height: 90upx;
	}

	.app-img {
		width: 100%;
		height: 100%;
	}

	.app-name {
		width: 100%;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}
</style>

<style lang="scss">
	.item-bottom {
		margin-left: 20rpx;
		width: 750*0.92-60-96rpx;
	}
</style>
